<template>
  <div class="addKeyWord" :class="keyWordClass?keyWordClass:``">
    <div class="select-big">
      <el-select v-model="form.isType" :style="{width:selectWidth?selectWidth+'px':'150px' }" :size="sizeType?sizeType:`small`" :placeholder="selectPlaceholder" v-if="typeList && typeList.length>0">
        <el-option
          v-for="item in typeList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-input :placeholder="inputPlaceholder" :size="sizeType?sizeType:`small`" v-model="form.keyword" class="select-right" @keyup.enter.native="handleQuery">
        <el-button slot="append" icon="el-icon-plus" @click="handleQuery"></el-button>
      </el-input>
    </div>
              <div class="labelSelect-list" v-if="keywordList && keywordList.length>0">
                <span v-for="(item,index) in keywordList" :key="index">{{ item }} <i class="el-icon-close"@click="delTabel(index)"></i></span>
              </div>
  </div>
</template>
<script>
export default {
  name: "addKeyWord",
  props: {
    typeList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    selectWidth: {
      //select的宽度
      type: Number,
      default: 150,
    },
    sizeType: {
      //框的尺寸
      type: String,
      default: 'small'
    },
    inputPlaceholder: {
      //input的
      type: String,
      default: '可输入多个，按enter确认'
    },
    selectPlaceholder: {
      //select的
      type: String,
      default: '请选择'
    },
    keyWordClass:{
      type: String,
      default: ''
    },
  },
  data() {
    return {
      form: {
        isType: null,
        keyword: null,//
      },
      keywordList: [],
    }
  },
  created() {
    this.form.isType=this.typeList[0].value;
  },
  methods: {
    handleQuery() {
        if(this.form.keyword){
            this.keywordList.push(this.form.keyword);
            this.form.keyword=null;
            let obj={
                isType:this.form.isType,
                keywordList:this.keywordList,
            }
            this.$emit('getValue',obj)
        }

    },
    delTabel(index){
      this.keywordList.splice(index,1) ;
      let obj={
        isType:this.form.isType,
        keywordList:this.keywordList,
      }
      this.$emit('getValue',obj);
    }
  },
  mounted() {

  },
}
</script>

<style scoped lang="scss">
.addKeyWord {
  .select-big {
    display: flex;
    align-items: center;
    .el-select {
      margin-right: 10px;
    }
  }
 ::v-deep .el-input-group__append, .el-input-group__prepend{
    padding: 0px 10px;
  }
}
.labelSelect-list {
  label {
    font-size: 14px;
    line-height: 1.5715;
    word-wrap: break-word;
    font-weight: 400;
  }

  i {
    cursor: pointer;

  }

  span {
    margin: 4px 4px 4px 0;
    font-size: 12px;
    height: 25px;
    line-height: 25px;
    white-space: nowrap;
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 4px;
    padding: 0px 7px;
    display: inline-block;

  }
}
</style>
